<template>
  <div class="home flex">
    <div class="home_left">
      <div class="home_banner">
        <van-swipe :autoplay="3000" indicator-color="white">
          <van-swipe-item>
            <img src="./img1/banner@2x.png" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="./img1/banner@2x.png" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="./img1/banner@2x.png" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="tooltip">
        <span
          ><img
            src="./img1/tz_icon.png"
            alt=""
          />心动不如行动，营业三部喜获烽火支公司增员PK赛胜出。</span
        >
        <i>2小时前</i>
      </div>
      <div class="home_nav_list">
        <ul>
          <li @click="goZybFn">
            <img src="./img2/zyb.png" alt="" />
            <p>增员宝</p>
          </li>
          <li @click="goPcFn">
            <img src="./img2/tsyj.png" alt="" />
            <p>天生赢家</p>
          </li>
          <li @click="interviewFn">
            <img src="./img2/ms.png" alt="" />
            <p>面试</p>
          </li>
          <li>
            <img src="./img2/qy.png" alt="" />
            <p>签约</p>
          </li>
        </ul>
      </div>
      <div class="home_title flex">
        <div class="home_title_left flex">
          <h2>增员统计</h2>
          <span>(数据截至 2020-12-1～2020-12-12 24时)</span>
        </div>
        <div class="home_title_right flex">
          <el-select
            v-model="typeVal"
            class="type_date"
            @change="seleFn"
            placeholder="请选择"
          >
            <el-option
              v-for="item in typeDate"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="dateVal"
            :class="
              typeVal == '按月'
                ? 'date2'
                : typeVal == '按年'
                ? 'date1'
                : 'date3'
            "
            placeholder="请选择"
          >
            <el-option
              v-for="item in date"
              :key="item.value"
              :label="seleY(item.label, typeVal)"
              :value="seleY(item.value, typeVal)"
            >
            </el-option>
          </el-select>
        </div>
      </div>
      <ul class="charts_box flex">
        <li style="background: rgba(231, 247, 255, 1)">
          <div class="charts_left">
            <p style="color: #3774f6">新增人才</p>
            <div>
              <strong style="color: #3774f6">28</strong>
              <span>同比 4</span>
              <img src="./img1/red_jts_icon.png" alt="" />
            </div>
          </div>
          <div class="charts_right">
            <img src="./img1/bar_3.png" alt="" />
          </div>
        </li>
        <li style="background: rgba(239, 241, 254, 1)">
          <div class="charts_left">
            <p style="color: #7660f1">天生赢家</p>
            <div>
              <strong style="color: #7660f1">23</strong>
              <span>同比 2</span>
              <img src="./img1/red_jts_icon.png" alt="" />
            </div>
          </div>
          <div class="charts_right">
            <img src="./img1/bar_2.png" alt="" />
          </div>
        </li>
        <li style="background: rgba(232, 250, 243, 1)">
          <div class="charts_left">
            <p style="color: #3a8d57">入职申请</p>
            <div>
              <strong style="color: #3a8d57">12</strong>
              <span>同比 2</span>
              <img src="./img1/xd_jtiant_icon.png" alt="" />
            </div>
          </div>
          <div class="charts_right">
            <img src="./img1/bar_1.png" alt="" />
          </div>
        </li>
        <li style="background: rgba(255, 244, 247, 1)">
          <div class="charts_left">
            <p style="color: #dd3d68">已入司</p>
            <div>
              <strong style="color: #dd3d68">8</strong>
              <span>同比 1</span>
              <img src="./img1/red_jts_icon.png" alt="" />
            </div>
          </div>
          <div class="charts_right">
            <img src="./img1/bar_4.png" alt="" />
          </div>
        </li>
      </ul>
<<<<<<< HEAD
=======
      <ul class="home_left_bottom">
        <li @click="goPcFn">
          <img src="./img1/tsyj.png" alt="" />
          <div class="text">
            <span>天生赢家测评<i v-if="false">2</i></span>
          </div>
        </li>
        <li>
          <img src="./img1/pcbg.png" alt="" />
          <div class="text">
            <span class="violet">测评报告<i>2</i></span>
          </div>
        </li>
        <li @click="goZybFn">
          <img src="./img1/zyb.png" alt="" />
          <div class="text">
            <span class="blue">增员宝<i v-if="false">2</i></span>
          </div>
        </li>
      </ul>
>>>>>>> 09b868de12a5afa443c39651869023e16bdba3ca
    </div>
    <div class="home_right">
      <div class="home_right_top">
        <div
          style="
            padding: 0;
            background-position: 0;
            padding-left: 0.2rem;
            margin-bottom: 0.24rem;
          "
          class="home_title flex"
        >
          <div class="home_title_left flex">
            <h2>动态</h2>
          </div>
          <div
            class="home_title_left"
            style="color: rgba(90, 107, 128, 0.5); font-size: 0.14rem"
          >
            更多<i class="el-icon-caret-right"></i>
          </div>
        </div>
        <ul class="home_right_list">
          <li>
            <div class="left">
              <div class="img_home_right">
                <img src="../../assets/header.png" alt="" />
              </div>
              <div class="info_home_right">
                <h3>Bella</h3>
                <p>2小时前</p>
              </div>
            </div>
            <div class="status_home_right">签约入司</div>
          </li>
          <li>
            <div class="left">
              <div class="img_home_right">
                <img src="../../assets/tx2.png" alt="" />
              </div>
              <div class="info_home_right">
                <h3>Billy</h3>
                <p>5小时前</p>
              </div>
            </div>
            <div class="status_home_right">面试通过</div>
          </li>
          <li>
            <div class="left">
              <div class="img_home_right">
                <img src="../../assets/tx3.png" alt="" />
              </div>
              <div class="info_home_right">
                <h3>Jack</h3>
                <p>6小时前</p>
              </div>
            </div>
            <div class="status_home_right">面访完成</div>
          </li>
          <li style="border: 0">
            <div class="left">
              <div class="img_home_right">
                <img src="../../assets/tx4.png" alt="" />
              </div>
              <div class="info_home_right">
                <h3>Kate</h3>
                <p>12-12 10:00</p>
              </div>
            </div>
            <div class="status_home_right">入职申请</div>
          </li>
        </ul>
      </div>
      <div class="home_right_top" style="margin-bottom: 0">
        <div
          style="
            padding: 0;
            background-position: 0;
            padding-left: 0.2rem;
            margin-bottom: 0.24rem;
          "
          class="home_title flex"
        >
          <div class="home_title_left flex">
            <h2>排行榜</h2>
          </div>
          <div
            class="home_title_left"
            style="color: rgba(90, 107, 128, 0.5); font-size: 0.14rem"
          >
            更多<i class="el-icon-caret-right"></i>
          </div>
        </div>
        <div class="my">
          <div class="ranking">
            <div class="left">
              <span>排名</span>
              <p>8</p>
            </div>
            <div class="img">
              <img src="../../assets/tx5.png" alt="" />
            </div>
            <h3>Alice</h3>
          </div>
          <span class="num">4</span>
        </div>
      </div>
      <ul class="ranking_list">
        <li>
          <div class="left">
            <div class="img">
              <img src="./img2/no1@2x.png" alt="" />
            </div>
            <span>Sophia<i>（上海分公司）</i></span>
          </div>
          <span class="num">10</span>
        </li>
        <li>
          <div class="left">
            <div class="img">
              <img src="./img2/no2@2x.png" alt="" />
            </div>
            <span>Jerry<i>（广东分公司）</i></span>
          </div>
          <span class="num">8</span>
        </li>
        <li>
          <div class="left">
            <div class="img">
              <img src="./img2/no3@2x.png" alt="" />
            </div>
            <span>Monica<i>（上海分公司）</i></span>
          </div>
          <span class="num">7</span>
        </li>
        <li>
          <div class="left">
            <div class="img">4</div>
            <span>Sandy<i>（江苏分公司）</i></span>
          </div>
          <span class="num">6</span>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "Home",
  data() {
    return {
      typeVal: "按月",
      dateVal: "",
      date: [
        {
          value: "2020-12-18 17:00",
          label: "2020-12-18 17:00",
        },
        {
          value: "2021-12-18 17:00",
          label: "2021-12-18 17:00",
        },
        {
          value: "2022-12-18 17:00",
          label: "2022-12-18 17:00",
        },
        {
          value: "2023-12-18 17:00",
          label: "2023-12-18 17:00",
        },
        {
          value: "2024-12-18 17:00",
          label: "2024-12-18 17:00",
        },
      ],
      typeDate: [
        {
          value: "按年",
          label: "按年",
        },
        {
          value: "按月",
          label: "按月",
        },
        {
          value: "按日",
          label: "按日",
        },
      ],
    };
  },
  created() {
    this.dateVal = this.seleY(this.date[0].value, this.typeVal);
  },
  methods: {
<<<<<<< HEAD
    goZybFn() {
      this.$router.push({
        path: "/addProspectiveStaff",
      });
    },
    goPcFn() {
      this.$router.push({
        path: "/evaluation",
      });
    },
    interviewFn(){
      this.$router.push({
        path: "/evaluation",
        query:{
          state:1
        }
      });
=======
    goZybFn(){
      this.$router.push({
        path:'/addProspectiveStaff'
      })
    },
    goPcFn(){
      this.$router.push({
        path:'/evaluation'
      })
>>>>>>> 09b868de12a5afa443c39651869023e16bdba3ca
    },
    seleFn() {
      this.dateVal = this.seleY(this.date[0].value, this.typeVal);
    },
    seleY(item, typeVal) {
      let a = "";
      let b = item.split(" ");
      switch (typeVal) {
        case "按年":
          a = item.split("-")[0];
          break;
        case "按月":
          a = item.split("-")[0] + "-" + item.split("-")[1];
          break;
        case "按日":
          a =
            b[0].split("-")[0] +
            "-" +
            b[0].split("-")[1] +
            "-" +
            b[0].split("-")[2];
          break;
      }
      return a;
    },
  },
};
</script>
<style scoped>
.home >>> .el-input__inner {
  padding: 0 0.13rem;
  height: 0.22rem;
  line-height: 0.22rem;
  font-size: 0.14rem;
   line-height: 0.22rem;
  color: #1fa9da;
  border-color: #1fa9da;
}
.home >>> .el-input__prefix,
.home >>> .el-input__suffix {
  height: auto;
  top: -10px;
}
.home >>> .el-select-dropdown__list {
  margin-bottom: 0.1rem;
}
.home >>> .el-select-dropdown__item {
  padding: 0;
}
</style>
<style lang="less" scoped>
.ranking_list {
  background: #fff;
  li {
    display: flex;
    padding: 0.13rem 0.18rem;
    justify-content: space-between;
    .left {
      display: flex;
      span {
        font-size: 0.15rem;
        color: #5a6b80;
        i {
          font-style: normal;
          font-size: 0.13rem;
        }
      }
      .img {
        width: 0.28rem;
        text-align: center;
        font-size: 16px;
        color: #666666;
        overflow: hidden;
        margin-right: 0.12rem;
        img {
          width: 100%;
          display: block;
        }
      }
    }
    .num {
      margin-right: 0.12rem;
      font-size: 14px;
      color: #1fa9da;
    }
  }
  li:nth-child(2n){
    background: #FBFBFB;
  }
}
.my {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.17rem;
  align-items: center;
  border-bottom: 1px solid #f0f2f5;
  .ranking {
    display: flex;
    h3 {
      font-size: 18px;
      line-height: 0.44rem;
      color: #5a6b80;
    }
    .left {
      width: 0.32rem;
      height: 0.44rem;
      margin-right: 0.1rem;
      background-image: linear-gradient(179deg, #ec257b 0%, #d41045 100%);
      border-radius: 0.06rem;
      color: #fff;
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: center;
      span {
        font-size: 0.11rem;
      }
      p {
        font-size: 0.22rem;
      }
    }
    .img {
      width: 0.44rem;
      height: 0.44rem;
      border-radius: 0.44rem;
      overflow: hidden;
      margin-right: 0.1rem;
      img {
        width: 100%;
        display: block;
      }
    }
  }
  .num {
    font-size: 14px;
    color: #1fa9da;
  }
}
.home_right_top {
  padding: 0.2rem;
  padding-bottom: 0;
  margin-right: 0.14rem;
  background: #fff;
  border-radius: 0.06rem;
  margin-bottom: 0.14rem;
}
.home_right_list {
  li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.108rem 0;
    border-bottom: 1px solid #f0f2f5;
    .left {
      display: flex;
    }
    .status_home_right {
      font-size: 14px;
      color: #1fa9da;
    }
    .img_home_right {
      width: 0.32rem;
      height: 0.32rem;
      border-radius: 0.32rem;
      margin-right: 0.11rem;
      overflow: hidden;
      img {
        width: 100%;
        display: block;
      }
    }
    .info_home_right {
      h3 {
        color: #5a6b80;
        font-size: 0.15rem;
      }
      p {
        font-size: 0.12rem;
        color: rgba(90, 107, 128, 0.5);
      }
    }
  }
}
.home_nav_list {
  width: 100%;
  height: 1.1rem;
  background: #ffffff;
  box-shadow: 0 0.1rem 0.1rem 0 rgba(0, 0, 0, 0.02);
  border-radius: 0.06rem;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  margin-bottom: 0.14rem;
  ul {
    display: flex;
    li {
      width: 0.55rem;
      font-size: 12px;
      color: #5a6b80;
      margin: 0 0.5rem;
      text-align: center;
      img {
        height: 0.55rem;
        margin-bottom: 0.08rem;
        display: block;
      }
    }
  }
}
.home {
  height: 100%;
  .home_left {
    height: 100%;
    min-width: 6.48rem;
    width: 6.48rem;
    padding: 0.16rem;
    box-sizing: border-box;
    .home_banner {
      overflow: hidden;
      border-radius: 0.06rem;
      overflow: hidden;
      height: 1.2rem;
      margin-bottom: 0.1rem;
      img {
        height: 1.2rem;
      }
    }
    .tooltip {
      color: #1fa9da;
      font-size: 0.14rem;
      height: 0.34rem;
      padding: 0 0.1rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #f2f2f2;
      border-radius: 6px;
      border-radius: 6px;
      margin-bottom: 0.14rem;
      span {
        display: flex;
        align-items: center;
        img {
          width: 0.13rem;
          display: block;
          margin-right: 0.1rem;
        }
      }
      i {
        font-style: normal;
        color: #5a6b80;
        opacity: 0.5;
      }
    }

    .charts_box {
      flex-wrap: wrap;
      margin-bottom: 0.08rem;
      background: #fff;
      li {
        max-width: 3rem;
        width: 3rem;
        height: 1.3rem;
        background: #ffffff;
        box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.02);
        border-radius: 0.06rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 0.16rem;
        margin-bottom: 0.16rem;
        .charts_left {
          margin-right: 0.19rem;
          p {
            font-size: 0.16rem;
            margin-bottom: 0.12rem;
            color: #5a6b80;
          }
          div {
            strong {
              font-size: 0.42rem;
              color: #5a6b80;
              margin-right: 0.14rem;
            }
            span {
              font-size: 0.14rem;
              color: #999999;
              margin-right: 0.04rem;
            }
            img {
              width: 0.07rem;
            }
          }
        }
        .charts_right {
          width: 1.4rem;
          img {
            width: 100%;
            display: block;
          }
        }
      }
      li:nth-child(2n) {
        margin-right: 0;
      }
    }
    .home_left_bottom {
      display: flex;
      li {
        min-width: 1.9rem;
        width: 1.9rem;
        height: 1.15rem;
        border-radius: 0.12rem;
        overflow: hidden;
        position: relative;
        margin-right: 0.16rem;
        .text {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          z-index: 1;
          display: flex;
          padding-left: 0.17rem;
          align-items: center;
          span {
            position: relative;
            font-size: 0.18rem;
            color: #c01c48;
            i {
              position: absolute;
              right: -0.16rem;
              top: -0.08rem;
              font-style: normal;
              width: 0.16rem;
              height: 0.16rem;
              display: flex;
              justify-content: center;
              align-items: center;
              font-size: 0.12rem;
              border-radius: 0.12rem;
              color: #ffffff;
              background-image: linear-gradient(
                179deg,
                #ec257b 0%,
                #d41045 100%
              );
            }
          }
          span.violet {
            color: #7c27c6;
          }
          span.blue {
            color: #5058d0;
          }
        }
        img {
          width: 100%;
          display: block;
        }
      }
    }
  }
  .home_title {
    background: #fff url("./img1/biaoti_icon.png") no-repeat 0.16rem 0.18rem;
    background-size: 0.06rem 0.23rem;
    padding-left: 0.16rem;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.12rem;
    padding-left: 0.32rem;
    padding-top: 0.18rem;
    padding-right: 0.16rem;
    .home_title_left {
      align-items: center;
      h2 {
        font-size: 0.18rem;
        color: #5a6b80;
        line-height: 0.25rem;
        margin-right: 0.1rem;
      }
      span {
        font-size: 0.12rem;
        color: #5a6b80;
      }
    }
    .home_title_right {
      .type_date {
        width: 0.7rem;
        height: 0.22rem;
        margin-right: 0.08rem;
      }
      .date1 {
        width: 0.8rem;
        height: 0.22rem;
      }
      .date2 {
        width: 1rem;
        height: 0.22rem;
      }
      .date3 {
        width: 1.2rem;
        height: 0.22rem;
      }
    }
  }
  .home_right {
    flex: auto;
    padding-top: 0.16rem;
    .video_wall_box {
      height: calc(100% - 0.79rem);
      overflow-y: auto;
      .video_wall_list {
        li {
          width: 100%;
          img {
            width: 100%;
            display: block;
            margin-bottom: 0.12rem;
          }
          p {
            font-size: 0.16rem;
            color: #5a6b80;
            margin-bottom: 0.23rem;
          }
        }
      }
    }
    .more {
      width: 100%;
      height: 0.28rem;
      background: #f7f7f7;
      font-size: 0.14rem;
      line-height: 0.28rem;
      text-align: center;
      color: #1fa9da;
      border-radius: 0.02rem;
    }
  }
}
</style>